import { increment, decrement, fetchData } from '@/store/modules/counterSlice'
import { useSelector, useDispatch } from 'react-redux'

const Counter = () => {
    const { count, data } = useSelector(state => state.counter)
    const dispatch = useDispatch()
    const handleIncrement = () => {
        dispatch(increment())
    }
    const handleDecrement = () => {
        dispatch(decrement())
    }
    const handleGetData = async () => {
        dispatch(fetchData())
    }
    return (
        <div>
            <button onClick={ handleIncrement }>+</button>
            <div>当前计数: {count}</div>
            <button onClick={ handleDecrement }>-</button>
            <button onClick={ handleGetData }>获取数据</button>
            <div>数据: {data.length}</div>
            {
                data.map(item => {
                    return <div key={ item.pos }>{ item.pos }</div>
                })
            }
        </div>
    )
}

export default Counter;